import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  optimizeDeps: {
    exclude: [], // 将指定数组中的依赖不进行依赖预构建
  },
  envPrefix: "ENV_",
  css: {
    // 对css的行为进行配置
    modules: {
      // 对css模块化的默认行为进行覆盖
      localsConvention: "camelCaseOnly",
      scopeBehaviour: "local", // 配置当前的  模块化行为是模块化还是全局化（有hash就是开启模块化的一个标志，因为他可以保证产生不同的hash值来控制我们的样式类名不被覆盖）
      // generateScopedName: "[name]_[local]_[hash:5]",
      // generateScopedName: (name, filename, css) => {
      //   // name: 代表的是你此刻css文件中的类名
      //   // filename：当前css文件的绝对路径
      //   // css：给的就是你当前样式
      //   console.log(name, filename, c ss);
      //   return `${name}_${Math.random().toString(36).substring(3, 8)}`;
      // },
      hashPrefix: "hello", // 生成hash会根据你的类名 + 一些其他的字符串（文件名+其他内部随机生成一个字符串）去进行生成，如果你想要生成hash更加独特一点
      globalModulePaths: ["./componentB.module.css"], // 代表你不想参与到css模块化的路径
    },
    preprocessorOptions: {
      // key+ config key代表预处理器的名
      less: {
        // 整个配置对象都会最终给到less的执行参数（全局参数）中去
        // 在webpack里就给less-loader去配置就好了
        math: "always",
        globalVars: {
          // 全局变量
          mainColor: "red",
        },
      },
      sass: {},
    },
    devSourcemap: true, // 开启css的souceMap(文件索引)
    postcss: {}, //配置postcss相关
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"), // 设置别名，以后我们在其他组件中可以使用@代替src这个目录
    },
  },
  // 构建生产包时的一些配置策略
  build: {
    // 配置rollup的一些构建策略
    rollupOptions: {
      // 控制输出
      output: {
        assetFileNames: "[hash].[name].[ext]", // 在rollup里面，hash代表将你的文件名喝文件内容进行组合计算得来的结果
      },
    },
    assetsInlineLimit: 4096, //4kb 控制静态资源如果小于该值则打包成base64格式
    outDir: "dist", // 配置输出目录
    assetsDir: "static", // 配置输出目录中的静态资源目录
    emptyOutDir: true, // 清除输出目录中的所有文件
  },
});
